<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>字段映射</title>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1 class="display-4">字段映射！</h1>
        <p class="lead">这是执行数据更新任务的关键步骤，配置源数据字段与目的数据字段的一一映射关系。</p>
        <hr class="my-4">
        <p class="lead">请选择此次数据更新需要的脚本和数据</p>
        <div class="row">
            <div class="input-group col-5">
                <select class="custom-select">
                    <option selected>请选择脚本...</option>
                    <option value="1">One.java</option>
                    <option value="2">Two.java</option>
                    <option value="3">Three.java</option>
                </select>
                <div class="input-group-append">
                    <button class="btn btn-success" type="button">选择脚本</button>
                </div>
            </div>
            <div class="col-2 text-center">
                <span class="oi oi-loop align-middle"></span>
            </div>
            <div class="input-group col-5">
                <select class="custom-select">
                    <option selected>请选择数据...</option>
                    <option value="1">One.txt</option>
                    <option value="2">Two.txt</option>
                    <option value="3">Three.txt</option>
                </select>
                <div class="input-group-append">
                    <button class="btn btn-success" type="button">选择数据</button>
                </div>
            </div>
        </div>
        <div class="card my-4">
            <form>
                <div class="card-body">
                    <h5 class="card-title">目的系统一</h5>
                    <hr>
                    <div class="form-group row">
                        <label for="firstUsername" class="col-1 col-form-label text-right">1</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="firstUsername" name="username"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">张三</span></p>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="firstPhone" class="col-1 col-form-label text-right">2</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="firstPhone" name="phone"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">18888888888</span></p>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="firstEmail" class="col-1 col-form-label text-right">3</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="firstEmail" name="email"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">20155227888@stu.suda.edu.cn</span></p>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title">目的系统二</h5>
                    <hr>
                    <div class="form-group row">
                        <label for="secondUsername" class="col-1 col-form-label text-right">1</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="secondUsername" name="username"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">张三</span></p>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="secondUniversity" class="col-1 col-form-label text-right">2</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="secondUniversity" name="university"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">苏州大学</span></p>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="secondCollege" class="col-1 col-form-label text-right">3</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="secondCollege" name="college"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">计算机科学与技术学院</span></p>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="secondProfession" class="col-1 col-form-label text-right">4</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="secondProfession" name="profession"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">软件工程</span></p>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title">目的系统三</h5>
                    <hr>
                    <div class="form-group row">
                        <label for="thridUsername" class="col-1 col-form-label text-right">1</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="thridUsername" name="username"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">张三</span></p>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="thridUniversity" class="col-1 col-form-label text-right">2</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="thridUniversity" name="university"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">苏州大学</span></p>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="thridLevel" class="col-1 col-form-label text-right">3</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="thridLevel" name="level"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">2015级</span></p>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="thridDegree" class="col-1 col-form-label text-right">4</label>
                        <div class="col-5">
                            <select class="custom-select is-valid" id="thridDegree" name="degree"></select>
                        </div>
                        <div class="col-5">
                            <p class="lead"><span class="align-middle">硕士研究生</span></p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="btn-group" role="group" aria-label="Basic example">
            <button class="btn btn-secondary" type="button">重新配置映射关系</button>
            <button class="btn btn-danger" type="button">提交数据字段的映射关系</button>
        </div>
    </div>
</div>
<script>
    $(".card-body .form-group select").load("/fragment");
</script>
</body>
</html>